import React, { Component } from 'react';
import TabNavigator from 'react-native-tab-navigator';
import {
  AppRegistry,
  Text,
  View,
  Navigator,
  StyleSheet,
  Image,
  TouchableHighlight  
} from 'react-native';
 
import HomeComponent from          './AgedUniversity';
import CustomerComponent from      './Exhibition';
import OrderComponent  from    './MyCourse';
import ProductComponent from    './NetworkCourse';
 
export default class Main extends Component {
    static navigationOptions = {
        headerStyle:{
            backgroundColor:'#d04542',
            height:50,
        },
        headerTintColor:'white',
    };
 constructor(props) {
 super(props);
 this.state = {
      selectedTab:'首页'
    };
 }
 
render() {
        return (
            <View style={styles.container} >
                <TabNavigator tabBarStyle={styles.tab}>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '首页'}
                        title="首页"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image source={require('../img/a_home2.png')} style={styles.icon}/> }
                        renderSelectedIcon={() => <Image style={styles.icon} source={require('../img/a_home1.png')} />}
                        onPress={() => this.setState({ selectedTab: '首页' })}>
                        <HomeComponent { ...this.props } />
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '我的课程'}
                        title="我的课程"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image source={require('../img/my2.png')} style={styles.icon}/> }
                        renderSelectedIcon={() => <Image style={styles.icon} source={require('../img/my1.png')} />}
                        onPress={() => this.setState({ selectedTab: '我的课程' }) } 
                        >
                        <OrderComponent { ...this.props } />
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '作品展示'}
                        title="作品展示"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image source={require('../img/works2.png')} style={styles.icon}/> }
                        renderSelectedIcon={() => <Image style={styles.icon} source={require('../img/works1.png')} />}
                        onPress={() => this.setState({ selectedTab: '作品展示' })}>
                        <CustomerComponent />
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '网络课程'}
                        title="网络课程"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image source={require('../img/network2.png')} style={styles.icon}/> }
                        renderSelectedIcon={() => <Image style={styles.icon} source={require('../img/network1.png')} />}
                        onPress={() => this.setState({ selectedTab: '网络课程' })}>
                        <ProductComponent />
                    </TabNavigator.Item>
                </TabNavigator>
            </View>
        );
    }
}
 
const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    tab: {  
        height: 50,  
        backgroundColor: '#F6F6F6',  
        alignItems: 'center'  
    },
    tabText: {
        marginTop: 1,
        color: '#6B6B6B',
        fontSize: 13
    },
    selectedTabText: {
        marginTop: 1,
        color: '#3D3D3D',
        fontSize: 13
    },
    icon: {
        width: 23,
        height: 23,
        resizeMode: 'stretch',  
        marginTop: 10  
    }
});
